<template>
  <!-- 首页 -->
  <view class="page-root" :style="fullStyle">
    <top-back-image-container :image-path="`${baseFilePath}/crowd/banner@2x.png`">
      <view class="area-container">
        新城区
      </view>
    </top-back-image-container>
    <view class="content">
      <!-- 服务 begin -->
      <view class="content-item-1">
        <view class="left">
          <view class="grid service-1" @click="goSubPage('/pages/home/contact/index')">
            <view class="info">
              <view class="title">附近联络站 </view>
              <view class="into">提交民意</view>
            </view>
          </view>
          <view class="grid service-2" @click="petitionAgent">
            <view class="info">
              <view class="title">信访代办服务窗口</view>
              <view class="into">点击进入</view>
            </view>
          </view>
        </view>
        <view class="right">
       <!--    <view class="grid service-3" @click="submitPublicOpinion">
            <view class="info">
              <view class="title">提交民意</view>
              <view class="into">点击进入</view>
            </view>
          </view> -->
          <view class="grid service-4" @click="displayHistoricalPublicOpinion">
            <view class="info">
              <view class="title">我的民意诉求</view>
              <view class="into">查看历史</view>
            </view>
          </view>
          <!-- <view class="grid service-5" @click="goSubPage(publicOpinionProcess)">
		   goSubPage(`${opinionPollPath}?isPetition=0`)
		   -->
		   <view class="grid service-5" @click="goSubPage(`${opinionPollPath}?isPetition=0`)">
            <view class="info">
              <view class="title">民意处理须知</view>
              <view class="into">了解更多</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 服务 end -->

      <!-- 登录图 begin -->
      <view class="content-item-2">
        <view class="grid" @click="goSubPage(downloadApp)">
          <view class="title">代表委员履职数字化工作平台</view>
          <view class="login">工作专属APP下载</view>
        </view>
      </view>
      <!-- 登录图 end -->

      <!-- 新闻List begin -->
      <view class="content-item-3">
        <view class="tabbar">
          <view class="switch-container">
            <view class="item" v-for="(item, index) in tabList" :key="index"
                  :class="{ active: tabIndex === index }" @tap="switchTab(index)">
              {{ item }}
              <view class="underline" :style="{ border: tabIndex === index ? '2px solid #ad2325' : '0' }">
              </view>
			 
            </view>
          </view>


          <view class="tab-content" v-for="(item, index) in tabList" :key="index">
            <view v-if="tabIndex === index" class="content-container">
              <view class="list-container" v-show="newsList != null && newsList.length > 0">
                <view class="grid" v-for="(newsItem, newsIndex) in newsList" :key="newsItem.id"
                      @click="goSubPage(`${newsItem.newsType == '1' ? contactTrendDetailPath :contactDynamicStatePath}?newsId=${newsItem.id}&infoQueryUrl=${newsItem.infoQueryUrl}&queryIdName=${newsItem.queryIdName}`)">
                  <view class="img">
                    <image :src="newsItem.newsCover"></image>
                  </view>
                  <view class="info">
                    <view class="title title-content">
                      {{ newsItem.newsTitle }}
                    </view>
                    <view class="time"> {{ newsItem.publishTime }}  <text style="float: right;">浏览量：{{ newsItem.id * 9 }}</text></view>
                    <view class="source">{{ newsItem.liaisonName }}</view>
                  </view>
                </view>
              </view>
              <empty v-show="newsList == null || newsList.length <= 0"></empty>
            </view>
          </view>
        </view>
      </view>
      <!-- 新闻List end -->
    </view>
  </view>
</template>

<script>
import {loginCheck} from "@/until/userLogin";
import {
  baseFilePath,
  contactDynamicStatePath,
  contactTrendDetailPath, downloadApp,
  opinionPollPath,
  opinionReactionPath, petitioningCommissioner,
  publicOpinionHistory,
  publicOpinionProcess
} from "@/until/publicConfig";
import {baseMixins} from "@/mixins/baseMixins";
import TopBackImageContainer from "@/compontent/topBackImageContainer/index.vue";
import {requestGet} from "@/until/means/request";
import {GET_LIAISON_NEWS, GET_PUBLIC_NEWS_DETAIL, QUERY_ALL_LIAISON_NEWS, QUERY_PUBLIC_NEWS} from "@/api/contact";
import {getFileAccessHttpUrl} from "@/until/fileUtil";
import empty from "@/compontent/empty/index.vue";
import {formtimestamp, friendlyDate} from "@/until/timeUtil";

export default {
  mixins: [baseMixins],
  components: {
    TopBackImageContainer,
    empty
  },
  data() {
    return {
      downloadApp,
      tabIndex: 0,
      tabList: [
        "联络站动态",
        "代表委员事迹",
        "优秀建议公示",
      ],
      // 联络站动态
      liaisonNews: [],
      // 联络站动态查询条件
      liaisonNewsQueryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      // 联络站动态总数
      liaisonTotal: 0,

      // 代表委员事迹
      committeeMemberNews: [],
      // 代表委员事迹查询条件
      committeeMemberNewsQueryParams: {
        pageNo: 1,
        pageSize: 10,
        newsType: 3
      },
      // 代表委员事迹总数
      committeeMemberTotal: 0,


      //  企业帮扶
      firmNews: [],
      // 企业帮扶查询条件
      firmNewsQueryParams: {
        pageNo: 1,
        pageSize: 10,
        newsType: 4
      },
      // 企业帮扶总数
      firmTotal: 0,

      publicOpinionProcess,
      opinionPollPath,
      opinionReactionPath,
      contactTrendDetailPath,
      contactDynamicStatePath
    }
  },
  computed: {
    newsList() {
      let {tabIndex} = this;
      let [newsList, baseData] = [[], []]
      switch (tabIndex) {
        case 0:
          baseData = this.liaisonNews;
          break
        case 1:
          baseData = this.committeeMemberNews;
          break
        case 2:
          baseData = this.firmNews;
          break
      }
      baseData.forEach(baseDataItem => {
        if (!newsList.some(newsListItem => newsListItem.id === baseDataItem.id)) {
          newsList.push(baseDataItem)
        }
      })
      return newsList
    }
  },
  onLoad() {
    this.queryAllNews()
  },
  methods: {
	 getRandomInt(min, max) {
	    min = Math.ceil(min); // 将min向上取整
	    max = Math.floor(max); // 将max向下取整
	    return Math.floor(Math.random() * (max - min + 1)) + min; // 返回min到max之间的随机整数
	},
    queryAllNews(clearAllFlag = false) {
      let {tabIndex} = this;
      switch (tabIndex) {
        case 0:
          this.getLiaisonNews(clearAllFlag)
          break
        case 1:
          this.getCommitteeMemberNews(clearAllFlag)
          break
        case 2:
          this.getFirmNews(clearAllFlag)
          break
      }
    },
    getLiaisonNews(clearAllFlag) {
      this.getQueryData({
        url: QUERY_ALL_LIAISON_NEWS,
        queryParamsName: 'liaisonNewsQueryParams',
        requestDataName: 'liaisonNews',
        requestTotalName: 'liaisonTotal',
        infoQueryUrl: 'GET_LIAISON_NEWS',
        queryIdName: 'liaisonNewsId',
        clearAllFlag
      })
    },
    getCommitteeMemberNews(clearAllFlag) {
      this.getQueryData({
        url: QUERY_PUBLIC_NEWS,
        queryParamsName: 'committeeMemberNewsQueryParams',
        requestDataName: 'committeeMemberNews',
        requestTotalName: 'committeeMemberTotal',
        infoQueryUrl: 'GET_PUBLIC_NEWS_DETAIL',
        queryIdName: 'publicNewsId',
        clearAllFlag
      })
    },
    getFirmNews(clearAllFlag) {
      this.getQueryData({
        url: QUERY_PUBLIC_NEWS,
        queryParamsName: 'firmNewsQueryParams',
        requestDataName: 'firmNews',
        requestTotalName: 'firmTotal',
        infoQueryUrl: 'GET_PUBLIC_NEWS_DETAIL',
        queryIdName: 'publicNewsId',
        clearAllFlag
      })
    },
    getQueryData({url, queryParamsName, requestDataName, requestTotalName, clearAllFlag, infoQueryUrl, queryIdName}) {
      if (this[queryParamsName].pageNo * (this[queryParamsName].pageSize - 1) >= this[requestTotalName] && this[requestTotalName] !== 0) return
      requestGet({url, data: this[queryParamsName]}).then(res => {
        const newData = res?.records?.map(item => {
          item.newsCover = item.newsCover != null && item.newsCover != '' ? getFileAccessHttpUrl(item.newsCover) : `${baseFilePath}/home/news-1.png`
          item.publishTime = item.publishTime != null && item.publishTime !== '' ? friendlyDate(formtimestamp(item.publishTime)) : ''
          item.infoQueryUrl = infoQueryUrl
          item.queryIdName = queryIdName
          return item
        }) || []
        this[requestDataName] = clearAllFlag ? newData : [...this[requestDataName], ...newData];
        this[queryParamsName].pageNo += 1
        this[requestTotalName] = res?.total || 0;
      })
    },
    onReachBottom() {
      this.queryAllNews()
    },
    // 信访代办服务窗口
    async petitionAgent() {
      if (!await loginCheck()) {
        return
      }
      this.goSubPage(`${petitioningCommissioner}?isPetition=1`)
    },
    // 向代表委员提交民意
    async submitPublicOpinion() {
      if (!await loginCheck()) {
        return
      }
      this.goSubPage(`${opinionPollPath}?isPetition=0`)
    },
    async displayHistoricalPublicOpinion() {
      if (!await loginCheck()) {
        return
      }
      this.goSubPage(publicOpinionHistory)
    },
    switchTab(index) {
      if (this.tabIndex === index) return;
      this.tabIndex = index;
      this.queryAllNews(true)
    }
  }
}
</script>

<style lang="scss" scoped>
.page-root {

  .area-container {
    position: absolute;
    background: rgba(255, 255, 255, .76);
    border-radius: 30rpx;
    padding: 10rpx 20rpx;
    top: 30rpx;
    left: 30rpx;

    font-weight: 400;
    font-size: 28rpx;
    color: #434343;
    line-height: 45rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }

  .content {
    padding: 0 30rpx;
    width: 100%;
    height: auto;

    .content-item-1 {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 20rpx 0;

      .grid {
        display: flex;
        flex-direction: column;
        background-size: 100%;

        .info {
          padding: 26rpx 0 0 20rpx;

          .title {
            color: #3A78FE;
            font-size: $font-size-base;
          }

          .into {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 120rpx;
            height: 40rpx;
            color: #FFFFFF;
            background: #3b78fe;
            font-size: $font-size-extra-sm;
            border-radius: $border-radius-lg;
            margin-top: 18rpx;
          }
        }
      }

      .left {
        width: 45%;

        .service-1 {
          height: 230rpx;
          background-image: url($base-path + '/crowd/service-1@2x.png');
          margin-bottom: 20rpx;

          .info {
            .title {
              color: #3A78FE;
            }

            .into {
              color: #FFFFFF;
              background: #3b78fe;
            }
          }
        }

        .service-2 {
          height: 145rpx;
          background-image: url($base-path +  '/crowd/service-2@2x.png');

          .info {
            .title {
              color: #CC7E07;
            }

            .into {
              color: #FFFFFF;
              background: #E28E11;
            }
          }
        }
      }

      .right {
        width: 52%;

        .service-3 {
          width: 100%;
          height: 118rpx;
          background-image: url($base-path + '/crowd/service-3@2x.png');
          margin-bottom: 20rpx;

          .info {
            padding-top: 26rpx !important;

            .title {
              color: #CC7E07;
			  
            }

            .into {
              color: #FFFFFF;	
              background: #E28E11;
              margin-top: 20rpx;	
            }
          }
        }

        .service-4 {
          width: 100%;
          height: 240rpx;
          background: url($base-path + '/crowd/service-4@2x.png') no-repeat  97%;
          margin-bottom: 10rpx;
			background-size: cover;
			 border-radius: 10px;
          .info {
            padding-top: 26rpx !important;

            .title {
              color: #F34416;
			  
            }

            .into {
              color: #FFFFFF;
              background: #F34416;
              margin-top: 20rpx;
            }
          }
        }

        .service-5 {
          width: 100%;
          height: 155rpx;
          background: url($base-path + '/crowd/service-5@2x.png') no-repeat 100%;
		  background-size: cover;
		  border-radius: 10px;
		  
          .info {
            padding-top: 16rpx !important;

            .into {
              margin-top: 20rpx;
            }
          }
        }
      }
    }

    .content-item-2 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      background-image: url($base-path + '/crowd/login-bg.png');
      background-size: 100%;
      background-repeat: no-repeat;
      margin: 20rpx 0;
      border-radius: 20rpx;
      overflow: hidden;

      .grid {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding: 30rpx 0;

        view {
          margin: 10rpx;
        }

        .title {
          color: #FFFFFF;
          font-size: $font-size-extra-lg;
        }

        .login {
          display: flex;
          justify-content: center;
          align-items: center;
          // width: 40%;
		  padding:0 8rpx;
          background: #F2C23F;
          color: #B90303;
          font-size: $font-size-base;
          border-radius: $border-radius-lg;
        }
      }
    }

    .content-item-3 {
      height: auto;
      width: 100%;

      .tabbar {
        display: flex;
        flex-direction: column;

        .switch-container {
          display: flex;
          overflow-x: auto;
          white-space: nowrap;
          justify-content: space-around;
          -webkit-overflow-scrolling: touch;
          padding: 20rpx 0;

          .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: $font-size-lg;
            padding: 0 10rpx;
          }

          .underline {
            width: 40%;
            height: 6rpx;
            margin-top: 10rpx;
            border-radius: 15px
          }

          .active {
            color: #ad2325;
          }
        }

        .tab-content {
          .grid {
            display: flex;

            flex-direction: unset;
            align-items: start;
            padding: 30rpx 0;
            margin: 0 30rpx;
            border-bottom: 1rpx solid #c7c7c7;
            width: calc(100% - 60rpx);

            .img {
              width: 180rpx;
              height: 180rpx;
              margin-bottom: 0;

              image {
                overflow: hidden;
                width: 180rpx;
                height: 180rpx;
                margin-bottom: 0;
                border-radius: $border-radius-lg;
              }
            }

            .info {
              margin: 10rpx 0 10rpx 30rpx;
            }

            .title {
              align-items: center;
              margin-bottom: 10rpx;
            }

            .time {
              margin-top: 10rpx;
              color: #ababab;
            }

            .source {
              margin-top: 10rpx;
              color: #484848;
            }

            .view {
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 100%;
              background-color: rgba(255, 255, 255, 0.6);
              padding: 10rpx 0;
            }
          }
        }


      }
    }
  }
}


</style>
